
<template>
  <div class="store-information-panel">
    <el-form label-width="80px" :model="data" size="small">
      <el-form-item label="样式类型">
        <el-select v-model="data.styleType" placeholder="请选择样式类型">
          <el-option label="底部信息" value="bottom-info" />
          <el-option label="圆形头像" value="circular-avatar" />
          <el-option label="居中信息" value="center-info" />
          <el-option label="带分隔线" value="divider-info" />
        </el-select>
      </el-form-item>

      <el-form-item label="店铺名称">
        <el-input
          v-model="data.name"
          placeholder="请输入店铺名称"
          maxlength="20"
          show-word-limit
        />
      </el-form-item>

      <el-form-item label="店铺描述">
        <el-input
          v-model="data.description"
          type="textarea"
          :rows="2"
          placeholder="请输入店铺描述"
          maxlength="50"
          show-word-limit
        />
      </el-form-item>

      <el-form-item label="店铺头像">
        <ImageUpload
          v-model="data.avatar"
          :limit="1"
          :file-size="5"
          file-type="['jpg', 'jpeg', 'png', 'gif']"
        />
      </el-form-item>

      <el-form-item label="背景图片">
        <ImageUpload
          v-model="data.backgroundImage"
          :limit="1"
          :file-size="5"
          file-type="['jpg', 'jpeg', 'png', 'gif']"
        />
      </el-form-item>

      <el-form-item label="蒙版类型">
        <el-radio-group v-model="data.overlayType">
          <el-radio label="gradient">渐变</el-radio>
          <el-radio label="solid">纯色</el-radio>
          <el-radio label="none">无</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-divider>边距设置</el-divider>

      <el-form-item label="上边距">
        <el-slider 
          v-model="styles.marginTop" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="下边距">
        <el-slider 
          v-model="styles.marginBottom" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="左边距">
        <el-slider 
          v-model="styles.marginLeft" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="右边距">
        <el-slider 
          v-model="styles.marginRight" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import ImageUpload from '@/components/ImageUpload/index.vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['update:data', 'update:styles'])
</script>

<style lang="scss" scoped>
.store-information-panel {
  padding: 10px;
}
</style>
